<template>
  <div class="task-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar 
      title="Vue3开发和体验【权重7.5%】" 
      fixed 
      placeholder 
      left-arrow 
      @click-left="$router.back()"
    >
      <template #right>
        <!-- <van-button size="small" type="primary" @click="exportData">导出数据</van-button> -->
      </template>
    </van-nav-bar>

    <!-- 任务简介 -->
    <van-cell-group inset class="task-intro">
      <van-cell title="任务简介" :value="task.weight" />
      <van-cell title="任务要求" :label="task.description" />
    </van-cell-group>

    <!-- 学生列表 -->
    <van-tabs v-model:active="activeTab">
      <van-tab title="未评分">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <van-cell-group inset>
            <van-swipe-cell v-for="(student, index) in ungradedStudents" :key="index">
              <van-cell 
                :title="student.name" 
                :label="`学号: ${student.id} | 班级: ${student.class}`"
              >
                <template #value>
                  <van-tag plain type="warning">未评分</van-tag>
                </template>
              </van-cell>
              <template #right>
                <van-button 
                  square 
                  type="primary" 
                  text="评分" 
                  @click="showGradeDialog(student)"
                />
              </template>
            </van-swipe-cell>
          </van-cell-group>
        </van-list>
      </van-tab>

      <van-tab title="已评分">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <van-cell-group inset>
            <van-cell 
              v-for="(student, index) in gradedStudents" 
              :key="index"
              :title="student.name"
              :label="`学号: ${student.id} | 班级: ${student.class} | 评语: ${student.comment}`"
            >
              <template #value>
                <div class="graded-cell">
                  <van-tag type="success">{{ student.score }}分</van-tag>
                  <!-- <van-button 
                    size="small" 
                    type="primary" 
                    plain 
                    @click="viewProject(student.link)"
                  >
                    查看项目
                  </van-button> -->
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>

    <!-- 评分对话框 -->
    <van-dialog 
      v-model:show="showDialog" 
      title="评分" 
      show-cancel-button
      @confirm="submitGrade"
    >
      <van-form @submit="submitGrade">
        <van-cell-group inset>
          <van-field
            v-model="currentStudent.name"
            label="学生姓名"
            readonly
          />
          <van-field
            v-model="currentStudent.id"
            label="学号"
            readonly
          />
          <van-field
            v-model="gradeForm.score"
            label="得分"
            type="number"
            placeholder="请输入得分(0-100)"
            :rules="[{ required: true, message: '请填写得分' }]"
          />
          <van-field
            v-model="gradeForm.comment"
            label="评语"
            type="textarea"
            placeholder="请输入评语"
            rows="2"
            autosize
          />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';

// 随机生成中文姓名
const generateChineseName = () => {
  const familyNames = ['李', '王', '张', '刘', '陈', '杨', '赵', '黄', '周', '吴', 
                      '徐', '孙', '胡', '朱', '高', '林', '何', '郭', '马', '罗'];
  const givenNames = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军', 
                     '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀兰', '霞'];
  const familyName = familyNames[Math.floor(Math.random() * familyNames.length)];
  const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];
  return familyName + givenName;
};

// 随机生成学号
const generateStudentId = () => {
  return Math.floor(10000000 + Math.random() * 90000000).toString();
};

// 随机生成班级
const generateClass = () => {
  const years = ['20', '21', '22', '23'];
  const majors = ['软件技术', '计算机应用', '网络工程', '大数据', '人工智能'];
  const classes = ['1班', '2班', '3班', '4班', '5班'];
  return `${years[Math.floor(Math.random() * years.length)]}${majors[Math.floor(Math.random() * majors.length)]}${classes[Math.floor(Math.random() * classes.length)]}`;
};

// 随机生成评语
const generateComment = () => {
  const comments = [
    '完成得很好，代码规范',
    '基本功能实现，但有待改进',
    '未按要求完成任务',
    '项目结构清晰，功能完整',
    '界面设计有待提高',
    '功能实现不完整',
    '代码质量较高',
    '需要进一步优化',
    '等启动设备再服务',
    '没有按要求完成任务',
    '秒表，和其他同学一起'
  ];
  return comments[Math.floor(Math.random() * comments.length)];
};

// 随机生成分数
const generateScore = () => {
  return Math.floor(Math.random() * 40 + 60).toString(); // 60-100分
};

// 任务信息
const task = {
  weight: '权重7.5%',
  description: '参考官网教程，熟悉Vue3的各个知识点，使用Vue编写一个简单的nodelist项目，并进行打包发布压缩上传。不能在纠正常浏览网页效果者不得分！'
};

// 学生数据
const ungradedStudents = ref([]);
const gradedStudents = ref([]);

// 初始化随机数据
const initRandomData = () => {
  // 生成15个未评分学生
  const ungraded = [];
  for (let i = 0; i < 15; i++) {
    ungraded.push({
      id: generateStudentId(),
      name: generateChineseName(),
      class: generateClass(),
      comment: '未开',
      score: '未作答',
      link: ''
    });
  }
  ungradedStudents.value = ungraded;
  
  // 生成15个已评分学生
  const graded = [];
  for (let i = 0; i < 15; i++) {
    graded.push({
      id: generateStudentId(),
      name: generateChineseName(),
      class: generateClass(),
      comment: generateComment(),
      score: generateScore(),
      link: '#'
    });
  }
  gradedStudents.value = graded;
};

// 分页相关
const loading = ref(false);
const finished = ref(false);

// 标签页
const activeTab = ref(0);

// 评分对话框
const showDialog = ref(false);
const currentStudent = ref({});
const gradeForm = ref({
  score: '',
  comment: ''
});

// 显示评分对话框
const showGradeDialog = (student) => {
  currentStudent.value = { ...student };
  gradeForm.value = {
    score: '',
    comment: student.comment === '未开' ? '' : student.comment
  };
  showDialog.value = true;
};

// 提交评分
const submitGrade = () => {
  // 从待评分列表移除
  const index = ungradedStudents.value.findIndex(s => s.id === currentStudent.value.id);
  if (index !== -1) {
    ungradedStudents.value.splice(index, 1);
  }
  
  // 添加到已评分列表
  gradedStudents.value.unshift({
    ...currentStudent.value,
    score: gradeForm.value.score || generateScore(),
    comment: gradeForm.value.comment || generateComment(),
    link: '#'
  });
  
  showToast('评分成功');
  showDialog.value = false;
};

// 查看项目
const viewProject = (link) => {
  if (link) {
    window.open(link, '_blank');
  } else {
    showToast('项目链接不存在');
  }
};

// 导出数据
const exportData = () => {
  showToast('导出数据成功');
};

// 组件挂载时初始化随机数据
onMounted(() => {
  initRandomData();
});
</script>

<style scoped>
.task-container {
  padding-bottom: 20px;
}

.task-intro .van-cell__value {
  text-align: left;
}

.graded-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.van-swipe-cell {
  margin-bottom: 8px;
}

.van-button {
  height: 100%;
}
</style>